<template>
  <div class="main message-list">
    <section style="text-align: center">
      <el-upload
        class="upload-demo"
        accept=".xls, .xlsx"
        drag
        name="excelFile"
        :action="importUrl"
        :headers="headers"
        :on-success="handleFileSuccess"
        :on-error="handleFileError"
        :before-upload="beforeFileUpload"
        v-loading="loading"
        :element-loading-text="loadingText"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
          <div
            class="el-upload__tip"
            style="padding-top: 24px; color: #bbb"
            slot="tip"
          >只能上传xls/xlsx文件，且不超过50M</div>
        </div>
      </el-upload>
      <div v-if="result.filePath" class="result-container">
        <div>
          转换结果：
          <span>总转换{{result.allDispose}}条，成功{{result.successDispose}}条，失败{{result.failureDispose}}条。</span>
        </div>已自动为您下载转换结果。如未自动下载请，
        <a :href="result.filePath">手动下载</a>
      </div>
    </section>
  </div>
</template>
<script>
import { encrypt } from "@/utils/tools";
let timer = null;
export default {
  name: "goodsSnTranslate",
  data() {
    console.log(this.$store.getters.userId)
    return {
      loading: false,
      loadingText: '上传中...',
      importUrl: `${process.env.BASE_API}/excelTransform/transform`,
      counter: 0,
      result: {
        filePath: "",
        all: 0,
        success: 0,
        error: 0
      },
      headers: {
        userId: this.$store.getters.userId,
        charset: encrypt(`${this.$route.name},/excelTransform/transform`)
      }
    };
  },
  methods: {
    beforeFileUpload(file) {
      if (file.size > 50 * 1024 * 1024) {
        this.$message.error("文件不能大于50M");
        return false;
      }

      this.result = {
        filePath: "",
        all: 0,
        success: 0,
        error: 0
      };
      this.loading = true
    },
    handleFileError(res) {
      this.loading = false
      this.$message({
        message:
          res && res.message ? JSON.parse(res.message).message : "服务器异常",
        type: "error",
        duration: 5 * 1000
      });
    },
    handleFileSuccess(res) {
      if (res && res.taskId) {
        this.counter = 0
        timer = setInterval(() => {
          this.counter++
          this.getFilePath(res.taskId)
        }, 2500);
      }
      /* this.result = res;
          window.open(res.filePath, '_blank'); */
    },
    getFilePath(taskId){
      this.request({
        url: `/excelTransform/transform/query/results`,
        method: 'get',
        params: { taskId }
      }).then((res) => {
        if (res.filePath){
          this.loading = false
          this.result = res;
          clearInterval(timer)
          window.open(res.filePath, '_blank')
        }else if (this.counter > 100) {
          clearInterval(timer)
          this.loading = false
          this.$message({
            message: "转换失败",
            type: "error",
            duration: 5 * 1000
          });
        } else {
          this.loadingText = res.message
        }
      }).catch(err => {
        console.log(err);
        clearInterval(timer)
        this.loading = false
        this.loadingText = '上传中...'
      });
    }
  }
};
</script>
<style lang="scss">
.result-container {
  color: #c03639;
  font-size: 15px;
  text-align: left;
  padding: 12px 0;
  line-height: 24px;
  display: inline-block;
  div {
    color: #333;
    font-weight: bold;
    span {
      color: #777;
    }
  }
  a {
    color: #1da2fd;
    font-weight: bold;
  }
}
</style>
